<template>
    <div class="start_box" id="start_box">
        <span class="start_item" v-for="(item, index) in StarClassList" :key="index" :class="item"></span>
    </div>
</template>

<script>
    export default {
        props:{
            rating: Number,
            size: Number
        },
        data() {
            return {
                
            }
        },
        computed: {
            StarClassList() {
                let Array = [];
                var int_rating = Math.floor(this.rating);//取出整数
                // 遍历添加
                for(let i=0;i < int_rating; i++) {
                    Array.push('start_on');
                }
                this.rating > int_rating ? Array.push('start_half') : '';
                // 剩余位置
                let RemainingPosition = 5 - Array.length;
                for(let j=0;j < RemainingPosition; j++) {
                    Array.push('start_off');
                }

                return Array;
            }
        }
    }
</script>

<style src="../../assets/css/reset.css" scoped></style>
<style lang="stylus" scoped>
    .start_box
        width 55px
        height 11px
        display flex
        margin-right 10px
        .start_item
            width 10px
            height 10px
            background-size 100% 100% !important
        .start_on
            background url('./images/star24_on@2x.png')
        .start_half
            background url('./images/star24_half@2x.png')
        .start_off
            background url('./images/star24_off@2x.png')
</style>